声明: 本文由DataScience发表,未经允许不得转载。 转载请注明本文链接mlln.cn, 并在文后留言转载
.
本文代码运行环境:
- windows10
- jupyter notebook
- p5.js 0.6.1
概述
为了制作更漂亮的p5程序, 我们通常需要加载外部图片, 然后绘制到画布上。这篇文章主要介绍p5js处理图片的一些技术。为了完成这篇文章, 我先下载了一个图片(example-img.png), 下面的代码里会经常用到。
(下面我们注册p5魔法, 以便于在jupyter notebook中使用p5.js, 如果你不用notebook, 请忽略这部分python代码)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| from IPython.core.magic import register_cell_magic from IPython.display import IFrame
TEMPLATE = """ <html> <head> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js"></script> <title>Notebook中显示P5.js页面</title> </head> <body> <a href="http://mlln.cn" target="_blank"><h5>p5.js效果展示: %(name)s</h5></a> <script> %(script)s </script> </body> </html> """
@register_cell_magic def p5(line, cell): file_id, kws = line.split(' ')[0], line.split(' ')[1:] kwargs = {} for kw in kws: k, v = kw.split('=') kwargs[k] = v filename = f"p5js-html/p5-05-{file_id}.html" with open(filename, "w", encoding='utf8') as fp: fp.write(TEMPLATE % {"script": cell, "name": filename}) if 'height' not in kwargs: kwargs['height'] = '200px' return IFrame(filename, width="100%", **kwargs)
del p5
|
为了能在notebook中使用p5加载图片, 我们需要在启动notebook的时候, 设置密码为空, 否则在加载图片(loadImage)的时候, 会返回一个登陆页。
1
| jupyter notebook --ip='*' --NotebookApp.token='' --NotebookApp.password=''
|
另外你需要设置允许跨域访问资源(在notebook的配置文件中设置):
1 2 3 4 5 6
| c.NotebookApp.tornado_settings = { 'headers': { 'Content-Security-Policy': "frame-ancestors 'self' http://localhost:8888 ", 'Access-Control-Allow-Origin': '*', } }
|
加载图片
我们通常在preload
方法中加载耗时资源, 这样可以在程序运行时, 保证所需资源已经加载完毕。
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| %%p5 load-image height=380px
let img; function preload() { img = loadImage("example-img.png"); } function setup() { createCanvas(480, 300); background(200) } function draw(){ image(img, 0, 0); }
|
输出:
我们可以传入位置参数来控制图片的位置, 同样的方法, 图片的尺寸也是可以控制的。
1 2 3 4 5 6 7 8 9 10 11 12 13
| %%p5 load-image-position-size height=380px
let img; function preload() { img = loadImage("example-img.png"); } function setup() { createCanvas(580, 300); background(200) } function draw(){ image(img, mouseX, mouseY, 50, 50); }
|
输出:
如果你不想在preload中加载图片, 你可以使用异步的方式在setup
函数中加载。
1 2 3 4 5 6 7 8 9 10 11
| %%p5 load-image-setup height=140px
function setup() { createCanvas(200, 100); background(200) loadImage("example-img.png", function(img){ image(img, 10, 20, 50, 50); }) }
|
输出:
注意
本文由jupyter notebook转换而来, 您可以在这里下载notebook
统计咨询请加QQ 2726725926, 微信 mllncn, SPSS统计咨询是收费的
微博上@mlln-cn可以向我免费题问
请记住我的网址: mlln.cn 或者 jupyter.cn